<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .top {

            display: flex;
            flex-direction: row;

            justify-content: space-between;
            align-content: center;
            position: relative;
        }

        .botoom {

            display: flex;
            flex-direction: row;

            justify-content: space-between;
            align-content: center;
            position: relative;
        }


        p {
            font-size: 14px;
        }

        .tu {
            position: absolute;
            left: 0px;
            top: 125px;
        }

        .tu1 {
            position: absolute;
            top: 125px;
            left: 445px;
        }

        .tu2 {
            position: absolute;
            top: 120px;
            left: 0px;
        }

        .tu3 {
            position: absolute;
            top: 120px;
            left: 0px;
        }

        .img3 {
            position: relative;
        }

        .img4 {
            position: relative;
        }

        .img5 {
            position: relative;
        }

        .img6 {
            position: relative;
        }

        .img7 {
            position: relative;
        }

        .img8 {
            position: relative;
        }

        .tu4 {
            position: absolute;
            left: 0px;
            top: 125px;
        }

        .tu5 {
            position: absolute;
            top: 125px;
            left: 0px;
        }

        .tu6 {
            position: absolute;
            top: 120px;
            left: 0px;
        }

        .tu7 {
            position: absolute;
            top: 120px;
            left: 0px;
        }
    span{
        position: relative;
        right: 130px;
        top: -10px;
    }
    </style>
</head>

<body>
    <div class="all">
        <div class="top">
            <div class="img1">
                <img src="./img/flex-01.jpg" alt="">
                <img src="./img/icon_play.png" alt="" class="tu"><span class="zi">2440.0万</span>
                <p>催眠：Delta脑波音乐减</p>
                <p>压深度睡眠</p>
            </div>
            <div class="img2"><img src="./img/flex-02.jpg" alt="">
                <img src="./img/icon_play.png" alt="" class="tu1"><span class="zi1">2440.0万</span>
                <p>催眠：Delta脑波音乐减</p>
                <p>压深度睡眠</p>
            </div>
            <div class="img3">
                <img src="./img/flex-03.jpg" alt="">
                <img src="./img/icon_play.png" alt="" class="tu2"><span class="zi2">2440.0万</span>
                <p>催眠：Delta脑波音乐减</p>
                <p>压深度睡眠</p>
            </div>
            <div class="img4">
                <img src="./img/flex-04.jpg" alt="">
                <img src="./img/icon_play.png" alt="" class="tu3"><span class="zi3">2440.0万</span>
                <p>催眠：Delta脑波音乐减</p>
                <p>压深度睡眠</p>
            </div>
        </div>
        <div class="botoom">
            <div class="img5"> <img src="./img/flex-05.jpg" alt="">
                <img src="./img/icon_play.png" alt="" class="tu4"><span class="zi4">2440.0万</span>
                <p>催眠：Delta脑波音乐减</p>
                <p>压深度睡眠</p>
            </div>
            <div class="img6"> <img src="./img/flex-06.jpg" alt="">
                <img src="./img/icon_play.png" alt="" class="tu5"><span class="zi5">2440.0万</span>
                <p>催眠：Delta脑波音乐减</p>
                <p>压深度睡眠</p>
            </div>
            <div class="img7"> <img src="./img/flex-07.jpg" alt="">
                <img src="./img/icon_play.png" alt="" class="tu6"><span class="zi6">2440.0万</span>
                <p>催眠：Delta脑波音乐减</p>
                <p>压深度睡眠</p>
            </div>
            <div class="img8"> <img src="./img/flex-08.jpg" alt="">
                <img src="./img/icon_play.png" alt="" class="tu7"><span class="zi7">2440.0万</span>
                <p>催眠：Delta脑波音乐减</p>
                <p>压深度睡眠</p>
            </div>
        </div>

    </div>
</body>

</html>